/* render 语法https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1 */

Vue.component('fviz-trees', {
    mixins: [fvizMixin],
    render: function (createElement, context) {
        let isAbsloute = (FViz.LAYTOUT_ABSLOUTE == this.objVal.layoutMode);
        let me = this;
        //图表容器样式
        let contStyle = {
            width: this.objConfig.width + "px",
            height: this.objConfig.height + "px",
        };

        if (isAbsloute) {
            contStyle.left = this.objConfig.left + "px";
            contStyle.top = this.objConfig.top + "px";
            contStyle.position = "absolute";
            //"z-index": (++cnt) * 30
        }

        //翻转样式
        if (this.objConfig.turnAngle && this.objConfig.turnAngle != 0) {
            contStyle["transform"] = "rotate(" + this.objConfig.turnAngle + "deg)";
            contStyle["-ms-transform"] = "rotate(" + this.objConfig.turnAngle + "deg)";
            contStyle["-moz-transform"] = "rotate(" + this.objConfig.turnAngle + "deg)";
            contStyle["-webkit-transform"] = "rotate(" + this.objConfig.turnAngle + "deg)";
            contStyle["-o-transform"] = "rotate(" + this.objConfig.turnAngle + "deg)";
        }

        contStyle['text-align'] = "center";
        contStyle['width'] = "150px";

        //图表容器定义
        let renderCont =
            createElement('div', {
                ref: "renderCont",
                style: contStyle,
            }, [

                createElement('el-progress', {
                    'class': {
                        a: true,
                    },
                    attrs: {
                        type: 'dashboard'
                    },
                    props: {
                        percentage: '10',
                        color: 'blue'
                    },
                }),
                createElement('div', {
                    style: {

                        border: '1px solid',
                        borderRadius: '25px',
                        marginTop: '-23px',
                        borderColor: 'red'
                    },
                    domProps: {
                        innerHTML: 'baz'
                    },
                })
            ]
            );

        //宽度高度不能在wrap div上，否则拖动时候wrap div不能移动
        //wrap div
        if (isAbsloute && !this.preview) {
            return createElement('div',
                [renderCont]
            );
        } else {
            return renderCont;
        }

    },

    data() {
        return {
            lastArea: 0,
            objConfig: {},
            options: {},
            axisVizType: [//有x、y轴的控件集合
                'line', 'bar'
            ],
            theme: {}
        }
    },
    props: {
        percentage: {
            type: Number,
            default: 10
        },
        indexName: {
            default: "you  are the  one"
        },
        colors: {
            default: "blue"
        },
    },
    watch: {
        percentage: function () {
            alert(1)
        }
    },
    methods: {

    },
    created() {


    },
    mounted() {

    },
    activated() {

    },
    destroyed() {

    },

})
